<template>
	<view class="">
		<!-- 头部红色背景盒子 -->
		<view class="headerBox pl30 pr30">
			<!-- 顶部占位盒子 -->
			<view class="header-bar"></view>
			<!-- 头部导航 -->
			<view class="flex row-between">
				<u-icon name="arrow-left" color="#fff" size="30" @click="gotoback"></u-icon>
				<view class="fs30 color-f">
					订单详情
				</view>
				<view class=""></view>
			</view>
			<view class="flex col-center mt70">
				<text class="fs40 color-f">{{orderDetail.status|type}}</text>
				<u-icon name="arrow-right" size="30" color="#fff"></u-icon>
			</view>
			<view class="pl30 pt30 pr30 pb30 bg-f radius16 mt40">
				<view class="">
					<u-icon name="map-fill" color="#F6B15D" size="30"></u-icon>
					<text class="ml20 fs24">{{orderDetail.address}}</text>
				</view>
				<view class="mt14 mb14 fs26 fw">
					{{orderDetail.address}}
				</view>
				<view class="fs24">
					{{orderDetail.addressee_name}} {{orderDetail.addressee_telphone}}
				</view>
			</view>
		</view>

		<!-- 商品盒子 -->
		<view class="orderitemBox">
			<view class="flex row-between">
				<text class="fs26">{{orderDetail.shop_name}}</text>
				<text class="color-red fs24">{{orderDetail.status|type}}</text>
			</view>
			<view class="mt20 flex goodsbox pb20" v-for="(item,i) in orderDetail.item" :key='i'>
				<image
					:src="item.thumb"
					class="w160 h160 radius10 mr20"></image>
				<view class="flex1 flex row-column row-between">
					<view class="fs24">{{item.goods_name}}</view>
					<view class="fs24 color9">{{item.spece_value_id}}</view>
					<view class="fs24 flex row-between">
						<text>¥{{item.amount}}</text>
						<text>x{{item.num}}</text>
					</view>
				</view>
			</view>

			<view class="flex row-right col-center mt20">
				<view class="">
					<view class="cancelbox" v-if="orderDetail.status==1" @click="quxiaoOrder">取消订单</view>
					<view class="surebox" v-if="orderDetail.status==4" @click="gotoSure">确认收货</view>
				</view>
			</view>
		</view>
		<!-- //商品盒子 -->

		<!-- 支付方式盒子 -->
		<view class="paytype mt30 radius16 bg-f fs26">
			<!-- 上面的盒子 -->
			<view class="flex row-between pb30 paytype-top col-center">
				<!-- 1==微信   2==支付宝  3银行卡 -->
				<view class="color9">{{orderDetail.pay_type | paytype}}支付</view>
				<view class="fw" @click="show=true" v-if="!orderDetail.status==0">查看转账截图</view>
			</view>
			<view class="mt30 flex row-right col-center">
				<text class="fw">总计：</text>
				<text class="color-red fw fs30">¥{{orderDetail.total_amount}}</text>
			</view>
		</view>
		<!-- 支付方式盒子 -->
		
		<!-- 查看物流盒子 -->
		<view class="paytype mt30 radius16 bg-f fs26" v-if="orderDetail.status==4||6">
			<view class="flex row-between   col-center">
				<view class="color9">物流信息</view>
				<view class="fw" @click="$jump('/subpkg/expressDetail/expressDetail?order_sn='+orderDetail.order_sn)">查看物流信息</view>
			</view>
		</view>
		<!-- //查看物流盒子 -->

		<!-- 订单编号盒子 -->
		<view class="mt30 radius16 bg-f fs24 color9 mr30 ml30 orderNum">
			<view class="">
				<text class="">订单编号：</text>
				<text @click="copy">
					<text>{{orderDetail.order_sn}}</text>
					<text class="cuIcon-copy"></text>
				</text>
			</view>
			<view class="mt30">
				<text class="mr30">下单时间：{{orderDetail.create_time}}</text>
			</view>
			<view class="mt30" v-if="orderDetail.status==3">
				<text class="mr30 color3 fs28 fw-700"><text class="color-red fw-700">驳回原因</text>：{{orderDetail.reject_reason}}</text>
			</view>
		</view>
		
		<!-- 查看转账截图弹层 -->
		<u-popup v-model="show" mode="center">
			<view class="w500  flex row-center col-center">
				<image :src="orderDetail.image" class="w-max" mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"orderDetail",
		filters:{
			type:function(val) {
				if(val==-1) {
					return '已取消'
				}else if(val==0) {
					return '未支付'
				}else if(val==1) {
					return '待确认'
				}else if(val==2) {
					return '待发货'
				}else if(val==3) {
					return '已驳回'
				}else if(val==4) {
					return '已发货'
				}else if(val==5) {
					return '已收货'
				}else if(val==6) {
					return '已完成'
				}
			},
			paytype:function(val) {
				if(val==1) {
					return '微信'
				}else if(val==2) {
					return '支付宝'
				}else {
					return '银行卡'
				}
			}
		},
		onLoad(opt) {
			this.order_id=opt.order_id
			this.getOrder_detail()
		},
		data() {
			return {
				show:false,
				order_id:'',
				orderDetail: {},
				kuaidiDetail:''
			};
		},
		methods: {
			getOrder_detail() {
				this.$api.order_detail({
					order_id:this.order_id
				}).then(res => {
					this.orderDetail=res.data
					this.kuaidiDetail=res.data.detail
					uni.setStorageSync('kuaidiDetail',this.kuaidiDetail)
				})
			},
			copy() {
				this.$tool.copy(this.orderDetail.order_sn)
			},
			//取消订单
			quxiaoOrder(item) {
				this.$api.cancel_order({order_id:this.order_id}).then(res=>{
					if(res.code==1) {
						this.$msg(res.msg)
						setTimeout(()=>{
							uni.navigateTo({
								url:'/subpkg/myOrder/myOrder?current=0'
							})
						},800)
					}
				})
				console.log(item)
			},
			//确认收货
			gotoSure() {
				this.$api.take_delivery({order_id:this.order_id}).then(res=>{
					this.$msg(res.msg)
					this.getOrder_detail()
				})
			},
			gotoback() {
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.headerBox {
		height: 500rpx;
		background: url(@/static/image/my/mybg.png) no-repeat;
		background-size: 100% 100%;
	}

	.orderitemBox {
		margin: 30rpx;
		margin-bottom: 0;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;

		.goodsbox {
			border-bottom: 2rpx solid #F5F5F5;
		}

		.cancelbox,
		.surebox{
			width: 140rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			border: 2px solid #D23030;
			// border: 2rpx solid #CDCDCD;
			font-size: 24rpx;
			font-weight: 400;
			color: #D23030;
			text-align: center;
			line-height: 58rpx;
		}
		.surebox {
			background-color:#D23030 ;
			color: #FFFFFF;
		}
	}

	.paytype {
		padding: 30rpx;
		margin: 30rpx;

		// .paytype-top {
		// 	border-bottom: 2rpx solid #F5F5F5;
		// }
	}

	.orderNum {
		padding: 30rpx
	}
</style>
